<template>
  <div style="background: #f5f5f5; height: 100vh">
    <van-nav-bar
      class="top"
      title="问题反馈"
      left-text=""
      right-text=""
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <van-dropdown-menu>
      <van-dropdown-item v-model="questionType" :options="questionTypeList" />
      <van-dropdown-item v-model="errorType" :options="errorTypeList" />
      <van-dropdown-item v-model="state" :options="states" />
    </van-dropdown-menu>
    <div
      @click="checkItem(item)"
      class="questionItem"
      v-for="item of feedbackList"
    >
      <div class="state">{{ item.mark }}</div>
      <p class="stem">{{ item.qtype }}题</p>
      <p class="describe">
        <span style="color: #717a89; font-size: 0.87rem">问题描述</span>
        {{ item.reason }}
      </p>
      <div style="display: flex; justify-content: space-between">
        <p class="questionType">{{ item.category }}</p>
        <p class="questionDate">{{ item.create_time.split(" ")[0] }}</p>
      </div>
    </div>
    <!-- <div class="footer">
      <van-button @click="errorBack" type="info">新增反馈</van-button>
    </div> -->
  </div>
</template>

<script>
import { ImagePreview } from "vant";
import { feedbackList } from "@/api/admin.js";
export default {
  data() {
    return {
      feedbackList: [],
      questionType: "",
      errorType: "",
      state: "",
      questionTypeList: [
        { text: "全部", value: "" },
        { text: "单选题", value: "单选" },
        { text: "判断题", value: "判断" },
        { text: "多选题", value: "多选" },
      ],
      errorTypeList: [
        { text: "全部", value: "" },
        { text: "题干缺失", value: "题干缺失" },
        { text: "答案错误", value: "答案错误" },
        { text: "用户体验", value: "用户体验" },
        { text: "其他", value: "其他" },
      ],
      states: [
        { text: "全部", value: "" },
        { text: "已处理", value: "已处理" },
        { text: "未处理", value: "未处理" },
      ],
    };
  },
  methods: {
    checkItem(item) {
      this.$router.push({
        name: "feedbackCheck",
        params: {
          all: item,
        },
      });
    },
    getList() {
      feedbackList({
        qtype: this.questionType,
        category: this.errorType,
        mark: this.state,
      }).then((res) => {
        if (res.code == 200) {
          this.feedbackList = res.data.list;
        }
      });
    },
    errorBack() {},
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {},
  },
  watch: {
    questionType() {
      this.getList();
    },
    errorType() {
      this.getList();
    },
    state() {
      this.getList();
    },
  },
  created() {
    this.getList();
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .questionItem {
    padding-left: 0.93rem;
    overflow: hidden;
    position: relative;
    background: #fff;
    width: auto;
    margin: 0.75rem;
    height: 7.59rem;
    .state {
      border-radius: 0.15rem 0.25rem 0.15rem 0.15rem;
      font-size: 0.81rem;
      color: #fff;
      text-align: center;
      width: 3.18rem;
      height: 1.4rem;
      position: absolute;
      right: 0;
      top: 0;
      background: #fa6400;
    }
    .stem {
      color: #333;
      font-size: 0.93rem;
      font-weight: 600;
      margin-top: 0.75rem;
    }
    .describe {
      margin-bottom: 1.53rem;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      margin-right: 0.75rem;
    }
    .questionType {
      color: #327bff;
      font-size: 0.875rem;
      margin-bottom: 0rem;
    }
    .questionDate {
      color: #999999;
      font-size: 0.875rem;
      margin-bottom: 0rem;
      margin-right: 0.93rem;
    }
  }

  .footer {
    padding-bottom: 1.25rem;
    display: flex;
    justify-content: center;
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    .van-button {
      background: #1571f7;
      width: 21.18rem;
    }
  }
  .top {
    background: #327bff;
    .van-nav-bar__content {
      .van-nav-bar__left {
        .van-nav-bar__arrow {
          color: #fff;
          font-size: 1.2rem;
          &:before {
            color: #fff !important;
          }
        }
      }
      .van-nav-bar__title {
        color: #fff;
      }
    }
  }
  .message {
    // padding: 0;
    border: 1px solid #ddd;
    width: auto;
    margin: 0 0.75rem 0.75rem;
    border-radius: 0.25rem;
    .van-field__value {
      // background: #f8f9fd;
    }
  }
}
</style>
